<template>
  <div class="hk-flex" style="justify-content:space-between">
    <div class="tab-list hk-flex">
      <img style="width:100px" :src="require('@/assets/images/icp/rule/fenxi-whole.png')" alt="">
      <div class="tab-text">
        <p class="font-size16">全部规则</p>
        <span class="font-c-blue">{{ tabs.total }}</span>
      </div>
    </div>
    <div class="tab-list tab-bg hk-flex">
      <img style="width:60px" :src="require('@/assets/images/icp/rule/fenxi-icon1.png')" alt="">
      <div v-for="(item,index) in tabs.analyseTypeCount" :key="item.name+index" class="tab-text">
        <p class="font-size14">{{ item.name }}</p>
        <span class="font-c-black">{{ item.num }}</span>
      </div>
    </div>
    <div class="tab-list tab-bg hk-flex">
      <img style="width:60px" :src="require('@/assets/images/icp/rule/fenxi-icon2.png')" alt="">
      <div v-for="(item,index) in tabs.status" :key="item.name+index" class="tab-text">
        <p class="font-size14">{{ item.name }}</p>
        <span class="font-c-black">{{ item.num }}</span>
      </div>
    </div>
    <div class="tab-list tab-bg hk-flex">
      <img style="width:60px" :src="require('@/assets/images/icp/rule/fenxi-icon3.png')" alt="">
      <div v-for="(item,index) in tabs.ruleType" :key="item.name+index" class="tab-text">
        <p class="font-size14">{{ item.name }}</p>
        <span class="font-c-black">{{ item.num }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TabList',
  props: {
    tabs: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      showAll: false,
      activeIndex: 0
    }
  },

  methods: {
    handleClick(index) {
      this.activeIndex = index
      this.showAll = false
      this.$emit('handleClick', index)
    }
  }
}
</script>

<style lang="scss" scoped>
.font-size16{
  font-size:16px;
}
.font-size14{
font-size:14px;
}
.font-c-blue{
  color:#4B6EEF;
  font-size:36px;
}
.font-c-black{
  color:#333;
  font-size: 24px;
}
.tab-bg{
  background:#F3F5FB;
  padding:20px;
  border-radius: 4px;
}
.tab-text{
  padding:0 20px;
  min-width:120px;
  p{
    margin:0 0 10px 0 !important;
  }
}
.card-container {
  width:246px;
  display: flex;
  margin-right:20px;
  margin-bottom:20px;
  justify-content:flex-start;
  align-items: center;
  padding: 0 15px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  // margin-bottom: 10px;
  cursor: pointer;
  &:last-child{
    margin-right:0px;
  }
  .card-title{
    flex:1;
  }
  .card-text{
    flex:1;
    margin-left:10px;
  }
}
.active {
  border-color: #2979ff;
  background: #e4eeff;
}
.card-num {
  color: #2979ff;
}
</style>
